/*
 * @Author: liangliang
 * @Date: 2023-05-18 15:40:29
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:14:43
 * @Description: 线上bug登记
 */

import React, { useState, useEffect } from 'react';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { useAntdTable } from 'ahooks';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { Button, Form, Input, Row, Col, Card, Modal, Select, Spin, Radio, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useFormModal } from '@/hooks/useFormModal';
import { signup, rechange, changeMembershipLvl, getCode } from '@/config/request/customer';
import { mobileSignup, orderProcess } from '@/config/request/testTools';

import './../module/index.scss';

type SizeType = Parameters<typeof Form>[0]['size'];

type FieldType = {
    customerMobile?: string;
};

const CustomerApi: React.FC = () => {
    const formTailLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 14, offset: 4 },
    };
    const [form] = Form.useForm();
    const [form1] = Form.useForm();
    const [form2] = Form.useForm();

    const [products, setProduct] = useState([
        {
            key: '0',
            productType: '1',
            productSku: 'productSku',
            quantity: 'productQuery',
        },
    ]);

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const changeProductType = (chooseIndex: number, attr: string, optionValue: string) => {
        const newList = products.map((item, index) => {
            if (index !== chooseIndex) return item;
            item[attr] = optionValue;
            return { ...item };
        });
        setProduct(newList);
    };

    const onChangeInput = (chooseIndex: number, attr: string, value: any) => {
        const newList = products.map((item, i) => {
            if (i !== chooseIndex) return item;
            item[attr] = value;
            return { ...item };
        });

        setProduct(newList);
    };

    const [loading, setLoading] = useState(false);

    //  等待接口请求,注册
    const onCheck1 = async () => {
        // console.log(products, 'products');
        setLoading(true);

        const re = form.getFieldsValue();

        // console.log("************", re);

        const param = {
            username: re.username1,
            password: re.invitationCode1,
            countryPlaceCode: re.countryPlaceCode
        };
        console.log('------------', param);
        const res = await signup(param);
        if (res.data != null) {
            setLoading(false);
        }
        console.log(res);
        showModal(res.data);
    };

    //  等待接口请求,充值
    const onCheck2 = async () => {
        // console.log(products, 'products');
        setLoading(true);

        const re = form2.getFieldsValue();

        // console.log("************", re);

        const param = {
            username: re.username2,
            customerShopId: re.customerShopId2,
            systemType: re.systemType2,
            mobile: re.mobile2,
        };

        setLoading(true);
        const res = await rechange(param);
        setLoading(false);

        if (res.data != null) {
            setLoading(false);
        }
        console.log(res);
        showModal(res.data);
    };

    //  等待接口请求,更换会员
    const onCheck3 = async () => {
        // console.log(products, 'products');
        setLoading(true);

        const re = await form.getFieldsValue();

        // console.log("************", re);

        const param = {
            membershipTemplateId: re.membershipTemplateId3,
            username: re.username3,
            customerShopId: re.customerShopId3,
        };
        console.log('------------', param);
        const res = await changeMembershipLvl(param);
        if (res.data != null) {
            setLoading(false);
        }
        console.log(res);
        showModal(res.data);
    };

    //  等待接口请求,获取验证码
    const onCheck4 = async () => {
        try {
            const re = await form.validateFields();
            const param = {
                customerMobile: re.customerMobile,
            };
            setLoading(true);
            const res = await getCode(param);
            setLoading(false);
            showModal(res.data);
            console.log('Success:', res);
        } catch (errorInfo) {
            console.log('Failed:', '必填项为空');
        }
    };

    const onclick5 = async () => {
        const re = form1.getFieldsValue();

        console.log(re);
        const param = {
            mobile: re.mobile,
            countryPlaceCode: re.countryPlaceCode,
            invitationCode: re.invitationCode

        };
        console.log('------------', param);
        setLoading(true);
        const res = await mobileSignup(param);
        if (res.data != null) {
            setLoading(false);
        }
        console.log(res);
        showModal(res.data);
    };

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [jsonObj, setJsonStr] = useState({});

    const showModal = (obj) => {
        setJsonStr(obj);
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    return (
        <div className="bg-white p-2.5">
            {loading ?
                <Spin tip="Loading" size="large">
                    <div className="content" />
                </Spin> :
                <div>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                        <Col span={12}>
                            <Card title="用户注册" bordered={false}>
                                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" form={form}>
                                    <Form.Item label="用户名：" name={'username1'}>
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="邀请码：" name={'invitationCode1'}>
                                        <Input />
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button type="primary" style={{ width: '100%' }} onClick={onCheck1}>
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="用户充值" bordered={false}>
                                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" form={form2} onFinish={onCheck2}>
                                    <Form.Item label="系统类型：" name={'systemType2'} rules={[{ required: true, message: '请输入手机号或者邮箱!' }]}>
                                        <Select defaultValue="--请选择平台--">
                                            <Select.Option value="1">D2C</Select.Option>
                                            <Select.Option value="2">B2B</Select.Option>
                                            <Select.Option value="3">直营商城</Select.Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item label="登录名：" name={'username2'}>
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="客户店铺ID：" name={'customerShopId2'}>
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="手机号：" name={'mobile2'}>
                                        <Input />
                                    </Form.Item>

                                    <Form.Item {...formTailLayout}>
                                        <Button type="primary" style={{ width: '100%' }} htmlType='submit'>
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    </Row>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                        <Col span={12}>
                            <Card title="修改会员等级" bordered={false}>
                                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" form={form}>
                                    <Form.Item label="会员等级id：" name={'membershipTemplateId3'}>
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="用户名：" name={'username3'}>
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="客户店铺ID：" name={'customerShopId3'}>
                                        <Input />
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button type="primary" style={{ width: '100%' }} onClick={onCheck3}>
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="获取手机/邮箱验证码" bordered={false}>
                                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" form={form}>
                                    <Form.Item<FieldType>
                                        label="手机号/邮箱"
                                        name={'customerMobile'}
                                        rules={[{ required: true, message: '请输入手机号或者邮箱!' }]}
                                    >
                                        <Input placeholder="请输入手机号或者邮箱" />
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button type="primary" style={{ width: '100%' }} onClick={onCheck4}>
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    </Row>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                        <Col span={12}>
                            <Card title="手机号注册" bordered={false}>
                                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" form={form1} onFinish={onclick5}>
                                    <Form.Item label="站点：" name={'countryPlaceCode'} rules={[{required: true, message:'站点必填！'}]}>
                                        <Select defaultValue={"--请选择站点--"}>
                                            <Select.Option value="JP">日本</Select.Option>
                                            <Select.Option value="KR">韩国</Select.Option>
                                            <Select.Option value="GB">英国</Select.Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item label="手机号：" name={'mobile'}>
                                        <Input placeholder="手机号非必填" />
                                    </Form.Item>
                                    <Form.Item label="邀请码：" name={'invitationCode'}>
                                        <Input placeholder="邀请码非必填" />
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button type="primary" style={{ width: '100%' }} htmlType="submit">
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    </Row>
                    <Modal title="执行结果：" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                        <SyntaxHighlighter language="javascript" style={solarizedlight}>
                            {/* {code} */}
                            {JSON.stringify(jsonObj, null, 4)}
                        </SyntaxHighlighter>
                    </Modal>
                </div>
            }
        </div>
    );
};

export default CustomerApi;
